<template>
    <div class="app-container">



        <div class="app-page">
            <el-form class="search-form" :model="form" :rules="rules" ref="formRef" :inline="true" label-width="160px">
                <div class="app-item">
                    <div class="app-title">公司信息</div>
                    <div class="app-cont">
                        <el-form-item class="form-item v50 fold_label" :label="'营业执照'" prop="license">
                          
								<el-avatar v-if="form.license" :src="checkUrl(form.license)" shape="square" :size="178"
                                    fit="contain" />
                        </el-form-item>
						<el-form-item class="form-item v50 fold_label" :label="'对公银行许可证'" prop="accountOpenFile">
						  
						<el-avatar v-if="form.accountOpenFile" :src="checkUrl(form.accountOpenFile)" shape="square" :size="178"
						    fit="contain" />
						</el-form-item>
                        <el-form-item class="form-item v30" label="公司名称" prop="orgName">
                           {{form.orgName}}
                        </el-form-item>
                        <el-form-item class="form-item v30" label="注册资本" prop="registeredCapital">
							 {{form.registeredCapital}}元
                        </el-form-item>
                        <el-form-item class="form-item v30" label="营业执照号" prop="businessLicenseNo">
                           {{form.businessLicenseNo}}
                        </el-form-item>
                        <el-form-item class="form-item v30" label="营业执照有效期开始" prop="businessLicenseStartExpired">
                            {{form.businessLicenseStartExpired}}
                        </el-form-item>
						<el-form-item class="form-item v30" label="营业执照有效期结束" prop="businessLicenseExpired">
							<template #default="scope">
							  <span v-if="form.businessLicenseExpired==null">长期</span>
							  <span v-else> {{form.businessLicenseExpired}}</span>
							</template>
						 
						</el-form-item>
						<el-form-item class="form-item v30" label="公司邮箱" prop="email">
						    {{form.email}}
						</el-form-item>
                        <el-form-item class="form-item" label="注册地址" prop="citycode">
                            
								 {{form.regProvince+form.regCity+form.regCountry+form.address}}
                        </el-form-item>
						<el-form-item class="form-item" label="企业联系详细地址" prop="citycode2">
						    
								 {{form.province+form.city+form.country+form.street}}
						</el-form-item>
						<el-form-item class="form-item v30" label="银行账户" prop="accountNo">
						   {{form.accountNo}}
						</el-form-item>
						<el-form-item class="form-item v30" label="联行号" prop="settleId">
						      {{form.settleId}}
						</el-form-item>

					   <el-form-item class="form-item v30" label="行业" prop="orgIndustry">
							  
							  <dict-tag :options="bf_org_industry" :value="form.orgIndustry"/>
					   </el-form-item>
					  
					   <el-form-item class="form-item v30" label="机构类型" prop="types">
					      
						    <dict-tag :options="org_type" :value="form.types"/>
					   </el-form-item>
                       
						<el-form-item class="search-vitem v100" label="经营范围" prop="businessScope">
							 {{form.businessScope}}
						</el-form-item>
                    </div>
                </div>

                <div class="app-item">
                    <div class="app-title">法人信息</div>
                    <div class="app-cont">
                        <el-form-item class="form-item v50 fold_label" :label="'法人身份证正面'" prop="legalIdcFront">
								<el-avatar v-if="form.legalIdcFront" :src="checkUrl(form.legalIdcFront)" shape="square" :size="178"
                                    fit="contain" />
                        </el-form-item>


                        <el-form-item class="form-item v30 fold_label" :label="'法人身份证反面'" prop="legalIdcBack">
                            <el-avatar v-if="form.legalIdcBack" :src="checkUrl(form.legalIdcBack)" shape="square" :size="178"
                                fit="contain" />

                        </el-form-item>

                        <el-form-item class="form-item v30" label="法人姓名" prop="legalName">
							 {{form.legalName}}
                        </el-form-item>
                        <el-form-item class="form-item v30" label="法人身份证号码" prop="legalIdcard">
                            {{form.legalIdcard}}
                        </el-form-item>
                       <el-form-item class="form-item v30" label="法人手机号码" prop="legalMobile">
                           {{form.legalMobile}}
                       </el-form-item>
						<el-form-item class="form-item v30" label="身份证有效期开始" prop="legalIdcardStartExpired">
						    {{form.legalIdcardStartExpired}}
						</el-form-item>
                        <el-form-item class="form-item v30" label="身份证有效期" prop="legalIdcardExpired">
                            <template #default="scope">
                              <span v-if="form.legalIdcardExpired==null">长期</span>
                              <span v-else> {{form.legalIdcardExpired}}</span>
                            </template>
                        </el-form-item>
                       
                        <el-form-item class="form-item v30" label="法人是否为公司实控人" prop="isActual">
                            <el-switch v-model="form.isActual" active-value="1" inactive-value="0" active-color="#FF6201"
                                inactive-color="#EEEEEE">
                            </el-switch>
                        </el-form-item>
						<el-form-item class="form-item" label="法人身份证地址" prop="legalIdcAddress">
						    {{form.legalIdcAddress}}
						</el-form-item>

                    </div>
                </div>

                <div class="app-item">
                    <div class="app-title">联系人</div>
                    <div class="app-cont">

                        <el-form-item class="form-item v30" label="姓名" prop="businessName">
                            {{form.businessName}}
                        </el-form-item>
						<el-form-item class="form-item v30" label="身份证号码" prop="businessIdcard">
						     {{form.businessIdcard}}
						</el-form-item>
						<el-form-item class="form-item v30" label="身份证有效期" prop="businessIdcardExpired">
						   <template #default="scope">
						     <span v-if="form.businessIdcardExpired==null">长期</span>
						     <span v-else> {{form.businessIdcardExpired}}</span>
						   </template>
						</el-form-item>
                        <el-form-item class="form-item v30" label="联系电话" prop="businessMobile">
                            {{form.businessMobile}}
                        </el-form-item>
                        <el-form-item class="form-item v30" label="联系邮箱" prop="businessEmail">
                            {{form.businessEmail}}
                        </el-form-item>


                    </div>
                </div>
				
				<div class="app-item">
				    <div class="app-title">受益人/控股股东<spn style="font-size: 12px;color: #FF6201;"> (受益人：至少一个;控股股东：至少一个)</spn></div>
				    <div class="app-cont">
						
						<el-table :data="form.beneficiaryItems" border style="width: 100%">
							<el-table-column label="类型">
								<template #default="scope">
									 <dict-tag :options="bf_org_partner_type" :value="scope.row.type"/>       
								</template>
							</el-table-column>
							<el-table-column prop="beneficiaryName" label="姓名">
							</el-table-column>
							<el-table-column prop="beneficiaryIdType" label="证件类型">
								<template #default="scope">
									 <dict-tag :options="bf_card_type" :value="scope.row.beneficiaryIdType"/>       
								</template>
							</el-table-column>
							<el-table-column prop="beneficiaryIdNo" label="证件号">
							</el-table-column>
							<el-table-column prop="beneficiaryPhone" label="手机号码">
							</el-table-column>
							<el-table-column prop="beneficiaryIdEffDate" label="证件生效日期">
							</el-table-column>
							
						</el-table>
						
						
						
					</div>
                </div>
               
            </el-form>
        </div>


    </div>
</template>

<script setup name="Company">
import { ElMessage, ElLoading } from 'element-plus'
import {checkUrl} from "@/api/tool/tool";
import {regionList} from "@/api/tool/region";
import {getOrgInfo} from "@/api/system/org";
const route = useRoute();
const { proxy } = getCurrentInstance();
const { org_type,bf_org_industry,bf_card_type,bf_org_partner_type} = proxy.useDict('org_type','bf_org_industry','bf_card_type','bf_org_partner_type');


const data = reactive({
    // 省市区 参数
    CascaderProps: {
        value: 'name',
        label: 'name',
        children: 'list',
    },
    cityOpt: [],
    // 省市区 参数 END
    companyStatusArr: [], //  开业状态
    orgTypeArr: [], // 机构类型
    companyNatureArr: [], //  公司性质

	beneficiaryItem:{
		open:false,
		form:{},
		resetForm: {
			type: null,
			beneficiaryName: null,
			beneficiaryIdType: null,
			beneficiaryIdNo: null,
			beneficiaryIdEffDate: null,
			beneficiaryIdOffDate: null,
			beneficiaryPhone: null,
			beneficiaryAddress: null,
			},
	},

    form: {
		beneficiaryItems:[],
    },
   
});

const { beneficiaryItem,form, rules, cityOpt, CascaderProps, companyStatusArr, orgTypeArr, companyNatureArr } = toRefs(data);

	
	
	
	 
	



// 所有省市区
function getRegionList() {
    regionList({ threeLevel: 3 }).then(response => {
        var data = response.data;
        cityOpt.value = data;
    });
}



function OrgInfo() {
	var userId=route.params.userId;
	console.log(userId);
    getOrgInfo(userId).then(response => {
        var data = response.data;


        // data.types = data.types.split(',');
		if(data!=null)
		{
			form.value = data;
			form.value.citycode = [data.regProvince, data.regCity, data.regCountry];
			form.value.citycode2 = [data.province, data.city, data.country];
		}
        

        // console.log(form.value);

    });
}


OrgInfo();
getRegionList();

</script>

<style lang="scss">
.app-container {
    width: 100%;
    background: #f0f2f5;

    .app-page {
        width: 100%;
        background: #FFFFFF;
        padding-bottom: 40px;

        .app-item {
            width: 100%;
        }

        .app-title {
            width: 100%;
            height: 55px;
            line-height: 55px;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, .85);
            border-bottom: 1px solid #e9e9e9;
            padding: 0 32px;
        }

        .app-cont {
            width: 100%;
            padding: 20px;
        }
    }
}

.fold_label {
        white-space: pre-line;
    }


.form-item {
    width: 100%;
	&.v30 {
        width: 30%;
    }
    &.v50 {
        width: 45%;
    }
	&.flex_1 {
		width: auto !important;
		flex: 1 !important;
	}
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 100% !important;

        &.v-address1 {
            width: 30% !important;
        }

        &.v-address2 {
            width: 62% !important;
        }

        &.v-address3 {
            width: 92% !important;
        }
    }
}


	.dialog-custom {
		flex: 1;
		background: #f5f9ff !important;
		padding: 20px;
		height: 100%;
		// width: 100%;

		.dialog-main {
			width: 100%;
			height: 100%;
			overflow-y: auto;

			.dialog-item {
				width: 100%;
				border-radius: 10px;
				background: #FFFFFF;
				overflow: hidden;


				&:not(:first-child) {
					margin-top: 20px;
				}

				.dialog-tbox {
					width: 100%;
					height: 48px;
					padding: 0 40px;
					font-size: 16px;
					font-weight: 550;
					border-bottom: 1px solid #e4efff;
					display: flex;
					align-items: center;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 20px;
						top: 50%;
						transform: translateY(-50%);
						width: 3px;
						height: 14px;
						background: #FF6201;
					}

					.tips {
						font-size: 12px;
						padding-left: 14px;
						color: red;
						font-weight: normal;
					}
				}

				.dialog-cont {
					width: 100%;
					padding: 30px;
					box-sizing: border-box;
				}

				.c-tips {
					background-color: #fffbe6;
					padding: 8px 15px 8px 15px;
					display: flex;
					align-items: flex-start;
					margin-bottom: 20px;
					line-height: 1.5;

					.icon {
						color: #faad14;
						margin-top: 4px;
					}

					.c-t {
						color: #f7ba1e;
						font-size: 14px;
						margin-left: 10px;
					}
				}

				.w-tip {
					padding: 0 20px;
					color: #faad14;
					font-size: 12px;
				}

				.search-fitem {
					width: 100%;

					&.v70 {
						width: 63.5%;
					}

					&.v50 {
						width: 45%;
					}
				}

				.showbtn {
					width: 100%;
					margin-top: 20px;
				}

				.showtips {
					padding-left: 140px;
					font-size: 14px;
					color: red;
				}

				.file-box {
					width: 100%;
					margin-top: 20px;

					.file-title {
						padding-left: 16px;
						position: relative;
						font-size: 16px;
						font-weight: 550;
						line-height: 1;

						&:after {
							content: '';
							width: 3px;
							height: 100%;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: 0;
							background: #FF6201;
						}
					}

					.file-cont {
						margin-top: 20px;
					}
				}

				.step {
					display: flex;
					width: 100%;
					background: #f6faff;
					margin-bottom: 60px;

					.step-item {
						position: relative;
						padding: 15px 30px;
						background: #f6faff;

						.content {
							color: #50565d;
							width: 250px;

							div {
								margin-block: 5px;
							}
						}

						.bottom {
							position: absolute;
							bottom: -35px;
							width: 100%;

							.text {
								position: absolute;
								top: 25px;
								left: -13px;
								width: 50px;
								text-align: center;
							}

							.round {
								width: 24px;
								height: 24px;
								background-color: #FF6201;
								border-radius: 50%;
							}

							.line {
								display: inline-block;
								width: 100%;
								height: 4px;
								background-color: #FF6201;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								margin-right: 15px;
							}
						}
					}
				}

			}
		}


		.el-form-item {
			width: 45%;

			&.vvv0 {
				width: 20%;
			}

			&.vvv1 {
				width: 29%;
			}


			&.vvv2 {
				width: 35%;
			}

			&.v100 {
				width: 95%;
			}

			.search-vitem {
				width: 220px !important;

				&.v40 {
					width: 40% !important;
				}

				&.v60 {
					width: 60% !important;
				}

				&.v100 {
					width: 100% !important;
				}

				&.flex_1 {
					width: auto !important;
					flex: 1 !important;
				}
			}
		}


		.show-tt {
			position: relative;
			color: #50565d;
			font-size: 14px;
			display: block;
			margin-bottom: 25px;
			margin-left: -10px;
			padding-left: 15px;
			font-weight: 700;

			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				background-color: #ee4e41;
			}
		}

	}



.showbtn {
					width: 100%;
					margin-top: 20px;
				}
</style>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: flex;
    align-items: cen;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
}

.avatar-uploader .el-upload:hover {
    border-color: #FF6201;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>